<template>
  <!-- <a-drawer 
    title="订单详情"
    wrapClassName="weiben-private-drawer"
    width="70%"
    :closable="false"
    :maskClosable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="loading">
  
    </a-spin>
  </a-drawer>  -->

  <div v-if="visible" style="background-color: white">

    <!-- <a-spin :spinning="loading"> -->
    <div class="wms-task-management-detail-div">

      <div class="drawer-content">

        <span style="font-weight:bold;cursor:default;">
          <a style="cursor:default;">{{ row.no }}</a>单据详情
        </span>
        <div style="margin-top: 10px;">
          <a-table :columns="columns" :data-source="list" row-key="id" :pagination="ipagination" :scroll="{x: true}">
            <template slot="index" slot-scope="text, record, index">{{ index + 1 }}</template>
            <span slot="containerStatusscopedSlots" slot-scope="text">
              <a-tag :color="text == '1' ? '#daa520' : (text == '2' ? '#cd5c5c' : (text == '3' ? '#add8e6' : '#696969'))">{{
                'orderdetails_statusenum' | dictType(text) }}</a-tag>
            </span>
          </a-table>
        </div>

      </div>
    </div>
    <!-- </a-spin> -->


  </div>
</template>

<script>
import { WmsOrderRukuDetail } from '@/api/modular/main/WmsOrderManage'

export default {
  name: 'wmsOrderRukuManagementDetailDrawer',
  emits: ['update:visible'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      containerStatusData: [],
      list: [],

      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: '60',
          scopedSlots: { customRender: 'index' },
          align: 'center'
        },
        {
          dataIndex:'projectCode',
          title:'项目编号',
          align: 'center',
          width:'120px'
        },
        {
          dataIndex: 'materialcode',
          title: '物料编号',
          align: 'center',
          width:'150px'
        },
        {
          dataIndex: 'materialname',
          title: '物料名称',
          align: 'center',
          width:'120px'
        },
        {
          dataIndex:'taCode',
          title:'TA编号',
          align: 'center',
          width:'120px'
        },
        {
          dataIndex: 'qty',
          title: '数量',
          align: 'center',
          align: 'center',
          width:'120px'
        },
        {
          dataIndex: 'price',
          title: '价格',
          align: 'center',
          align: 'center',
          width:'120px'
        },
        {
          dataIndex: 'sumPrice',
          title: '总金额',
          align: 'center',
          align: 'center',
          width:'120px'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'orderStatus',
          scopedSlots: { customRender: 'containerStatusscopedSlots' },
          align: 'center'
        },
      ],
       // 分页
       ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10','20','30','40'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + '共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        size:'small'
      },
    }
  },

  created() {
    const containerStatusOption = this.$options;
    this.containerStatusData = containerStatusOption.filters['dictData']('orderdetails_statusenum');
  },
  methods: {
    onClose() {
      this.close()
    },
    close() {
      this.$emit('update:visible', false)
    },
    afterVisibleChange(visible) {
      if (visible) {
        this.initShow()
      } else {
        this.afterClsoe()
      }
    },
    initShow() {
      this.loading = true;
      this.getList(() => {
        this.loading = false;
      })
    },
    getList(row) {
      let params = { id: row.id }
      WmsOrderRukuDetail(params).then(d => {
        this.list = d.data.rows || []
        this.$emit('update:visible', true)
        // callback && callback(true)
      }).catch(() => {
        this.$emit('update:visible', false)
        this.list = []
        // callback && callback(false)
      })
    },
    afterClsoe() {
      this.list = []
    }
  }
}
</script>

<style lang="less" scoped>
.wms-task-management-detail-div {
  height: 100%;
  overflow: auto;

  .drawer-content {
    padding: 16px;
  }
}
</style>